<template>
  <view class="tab" :style="{ height: tabBarHeight, paddingBottom: safeHeight }">
    <view
      v-for="(item, index) in tabBarList"
      :key="index"
      class="tab_item"
      @click="switchTab(item, item.index)"
    >
      <view class="tab_image">
        <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" class="image" mode="aspect"></image>
      </view>
      <view class="tab_text" :style="{ color: currentIndex == index ? selectedColor : color }">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TabBar',
    data() {
      return {
        tabBarHeight: '',
        safeHeight: '',
        color: '#666',
        selectedColor: '#115baa',
        tabBarList: [],
        currentIndex: 0
      }
    },
    props: {
      selectedIndex: {
        type: Number,
        default: 0
      }
    },
    watch: {
      selectedIndex: {
        handler(newVal, oldVal) {
          this.currentIndex = newVal
        }
      }
    },
    created() {
      this.tabBarHeight = this.$store.getters.heightData.tabBarHeight + 'px'
      this.safeHeight = this.$store.getters.heightData.safeHeight + 'px'
      this.currentIndex = this.selectedIndex
      this.getTabList()
    },
    methods: {
      getTabList() {
        if (uni.getStorageSync('identify') === 'physician') {
          this.tabBarList = [
            {
              "pagePath": "/pages/physicianIndex",
              "iconPath": "/static/images/tabBar/tab_home.png",
              "selectedIconPath": "/static/images/tabBar/tab_home_active.png",
              "text": "首页"
            },
            {
              "pagePath": "/pages/physicianTrainPlan",
              "iconPath": "/static/images/tabBar/tab_plan.png",
              "selectedIconPath": "/static/images/tabBar/tab_plan_active.png",
              "text": "计划"
            },
            {
              "pagePath": "/pages/physicianMine",
              "iconPath": "/static/images/tabBar/tab_mine.png",
              "selectedIconPath": "/static/images/tabBar/tab_mine_active.png",
              "text": "我的"
            }
          ]
        } else {
          this.tabBarList = [
            {
              "pagePath": "/pages/userIndex",
              "iconPath": "/static/images/tabBar/tab_home.png",
              "selectedIconPath": "/static/images/tabBar/tab_home_active.png",
              "text": "首页"
            },
            {
              "pagePath": "/pages/userTrainPlan",
              "iconPath": "/static/images/tabBar/tab_plan.png",
              "selectedIconPath": "/static/images/tabBar/tab_plan_active.png",
              "text": "训练"
            },
            {
              "pagePath": "/pages/userMine",
              "iconPath": "/static/images/tabBar/tab_mine.png",
              "selectedIconPath": "/static/images/tabBar/tab_mine_active.png",
              "text": "我的"
            }
          ]
        }
      },
      switchTab(item, index) {
        this.currentIndex = index
        const url = item.pagePath
        if (uni.getStorageSync('identify') === 'physician') {
          uni.reLaunch({ url })
        } else {
          uni.switchTab({ url })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tab {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    background-color: #fff;
    .tab_item {
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tab_image {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0 10rpx;
        .image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .tab_text {
        font-size: 24rpx;
      }
    }
  }
</style>
